<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>元素过渡-条件渲染</title>
  <script type="text/javascript" src="vue.js"></script>
  <style>
    .slide-enter-active, .slide-leave-active {
      transition: opacity 1s;
    }
    .slide-enter, .slide-leave-to /* .slide-leave-active below version 2.1.8 */ {
      opacity: 0;
    }
    .slide-enter-to, .slide-leave {
      opacity: 1;
    }
  </style>
</head>
<body>
  <div id="demo">
    <button v-on:click="show = !show">显示 / 隐藏</button>
    <transition name="slide">
      <p v-if="show">hello</p>
    </transition>
  </div>

  <script>
    new Vue({
      el: '#demo',
      data: {
        show: true
      }
    })
  </script>
</body>
</html>